import {h, init} from 'snabbdom'
import style from 'snabbdom/modules/style'
import cla from 'snabbdom/modules/class'
import eventlisteners from 'snabbdom/modules/eventlisteners'

const patch = init([style, eventlisteners, cla])

const app = document.querySelector('#app')

let id = 1;
const list = []

function add(id) {
    list.push({Rank: id, title: 'title'+id, description: 'description' + id})
}

for (id;id <= 3; id ++) {
    add(id)
}

function onclick() {
    add(id)
    id ++;
    show(list)
}

function getnewvnode(list) {
    return h('div', {
        style: {
            backgroundColor: '#000',
            color: '#fff',
            height: '300px'
        }
    }, [
        h('button', {
            on: {
                click: onclick,
            }
        }, 'Add'),
        h('div', list.map(l => {
            return h('div', {
                class: {
                    item: true
                }
            }, [
                h('span', {
                    style: {
                        display: 'inline-block',
                        width: '50px'
                    }
                }, l.Rank),
                h('span', {
                    style: {
                        display: 'inline-block',
                        width: '200px'
                    }
                }, l.title),
                h('span', {
                    style: {
                        display: 'inline-block',
                        width: '400px'
                    }
                }, l.description)
            ])
        }))
    ])
}

let oldVnode = app;
function show(list) {
    const vnode = getnewvnode(list);
    oldVnode = patch(oldVnode, vnode)
}

show(list)

